<template>
  <div ref="pieChart" class="pie-chart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
  data() {
    return {
      pieChart: ''
    }
  },
  mounted() {
    const pieChart = echarts.init(this.$refs.pieChart)
    // pieChart = echarts.init(this.$refs.pieChart)
    pieChart.setOption({
      title: {
        text: '视频广告',
        textStyle: {
          fontSize: '16px',
          fontWeight: 500
        },
        subtext: '300',
        subtextStyle: {
          fontSize: '20px',
          color: '#000'
        },
        left: 'center',
        top: 'center'
      },
      series: {
        type: 'pie',
        // 设置饼状图的益
        // center: ['50%', '50%'],
        radius: ['40%', '70%'],
        tooltip: {
          trigger: 'item'
        },
        // 数据
        data: [
          { name: '搜索引擎', value: 1048 },
          { name: '联盟广告', value: 484 },
          { name: '直接访问', value: 735 },
          { name: '邮件营销', value: 580 },
          { name: '视频广告', value: 300 }
        ],
        // 设置饼状图的样式
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        label: {
          formatter: '{b}:{c}',
          fontSize: '14px'
        }
      }
    })

    // pieChart.on('mouseover', params => {
    // console.log('pieChart', params) 可以通过params.data中的数据进行参数重置
    this.pieChart.on('mouseover', params => {
      const { name, value } = params.data
      this.pieChart.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.pie-chart {
  width: 100%;
  height: 300px;
}
</style>
